<template>
	<view class="container">
		<view class="wrapper">
			<view class="loginBox">
				<view class="loginHead">用户注册</view>
				<view class="item active">
					<view class="input-content">
						<view class="input-item">
							<input type="number" :value="mobile" placeholder="请输入手机号码" maxlength="11" data-key="mobile" @input="inputChange" />
						</view>
					<!-- 	<view class="input-item">
							<view>
								<view class="left">
									<input type="password" value="pictureCode" placeholder="请输入验证码" placeholder-class="input-empty" maxlength="11" data-key="pictureCode"
									 @input="inputChange" @confirm="toLogin" />
								</view>
								<view class="right">
									 <view class="codeBox" @tap="getCode"><image src="" style="width:100%;height: 100%;"></image></view>									
								</view>
							</view>
						</view> -->
						<view class="input-item">
							<view>
								<view class="left">
									<input type="password" value="smsCode" placeholder="请输入短信验证码" placeholder-class="input-empty" maxlength="11" data-key="smsCode"
									 @input="inputChange" @confirm="toLogin" />
								</view>
								<button :type="hasSend ? 'default' : 'primary'" size="mini" @click="sendCode">
									{{hasSend ? '验证码已发送' : '发送验证码'}}
								</button>
							</view>
						</view>
						<view class="input-item">
							<input type="text" :value="password" placeholder="请输入6-16位密码" maxlength="11" data-key="password" @input="inputChange" />
						</view>
					</view>
					<button class="confirm-btn" @click="toLogin" :disabled="logining">立即注册</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapMutations
	} from 'vuex';
	export default {
		data() {
			return {
				mobile: '',
				pictureCode: '',
				smsCode:'',
				password:'',
								
				logining: false,
				hasSend: false,
				loginCode: ''
			}
		},
		onTabItemTap(){
			// console.log('asdasd')
		},
		methods: {
			...mapMutations(['login','setUserInfo']),
			inputChange(e) {
				const key = e.currentTarget.dataset.key;
				this[key] = e.detail.value;
				if (key === 'mobile') {
					this.hasSend = false;
				}
			},
			navBack() {
				uni.navigateBack();
			},
			toRegist() {
				
			},
			async sendCode() {
				const mobile = this.mobile;
				if (this.hasSend) {
					uni.showToast({
						title: '验证码已发送，请注意查收',
						icon: 'none'
					})
				} else {
					if (!/^(?:(?:\+|00)86)?1[3-9]\d{9}$/.test(mobile)) {
						uni.showToast({
							title: '请输入正确的手机号码',
							icon: 'none'
						})
					} else {
						this.$request({
							url: 'sendCode.json',
							data: {
								'mobile': mobile
							},
							success: (res) => {
								if (res.code === 200) {
									uni.showToast({
										title: '验证码已发送'
									});
									this.mcode_id=res.data.mcode_id;
									this.hasSend = true;
								} else {
									uni.showToast({
										title: res.msg,
										icon: 'none'
									});
								}
							}
						}, false);
					}
				}
			},

			async toLogin() {
				const mobile = this.mobile;
				const mcode_id = this.mcode_id || 0;
				const smsCode = this.smsCode;
				const password = this.password;
				
				if (!/^(?:(?:\+|00)86)?1[3-9]\d{9}$/.test(mobile)) {
					uni.showToast({
						title: '请输入正确的手机号码',
						icon: 'none'
					});
					return;
				}
			
				if (smsCode.length != 6 || smsCode == "") {
					uni.showToast({
						title: '请输入正确的短信验证码',
						icon: 'none'
					});
					return;
				}
				if (password == "") {
					uni.showToast({
						title: '请输入6-16位密码',
						icon: 'none'
					});
					return;
				}
											
				uni.showLoading({
					title: '请稍后...'
				});
				this.$request({
					url: 'wx_register.json',
					data: {
						'mobile': mobile,
						'mcode_id': mcode_id,
						'mcode':smsCode,
						'password':password,
					},
					success: (res) => {
						if (res.code === 200) {
							uni.showToast({
								title: '注册成功'
							});
							
							this.logining = true;
							this.login(res.data);		
							uni.navigateBack({delta: 2});						
						} else {
							uni.showToast({
								title: res.msg,
								icon: 'none'
							});
						}
					}
				}, false);
			},
		},

	}
</script>

<style lang='scss'>
	page {
		background: #fff;
	}

	.container {
		position: relative;
		width: 100vw;
		height: 100vh;
		overflow: hidden;
		background: #fff;
	}

	.wrapper {
		position: relative;
		z-index: 90;
		background: #fff;
		padding-top: 40upx;
		
	}
	
	.loginHead{
		padding: 0 60upx;
		font-size:48upx;
		margin: 80upx 0px;	
		color: #222222;
		text-align: left;
	}

	.loginBox{
		.item{
			.input-content {
				padding: 0 60upx;
				margin-bottom: 80upx;
				
				.input-item {
					border-bottom: 1upx solid #b5b5b5;
					margin-bottom: 40upx;
				
					&:last-child {
						margin-bottom: 0;
					}
				
					>view {
						display: flex;
						align-items: center;
				
						.left {
							flex: 1;
						}
						
						.right{
							width: 100px;
							height: 28px;
							background-color: #ffe8e8;
						}
					}
								
					button {
						line-height: 56upx;
						height: 56upx;
						/* color: #fff; */
						background-color: #FFFFFF;
						color: #999999;
						border: none;
						border-left: 1px solid #999999;
						border-radius: 0;
						&:after{
							border: none;
						}
					}
				
					input {
						height: 80upx;
						font-size: 30upx;
						color: #333333;
						width: 100%;
						&.primary {
							background-color: #FFFFFF;
						}
					}
				}				
			}			
		}
	}

	.back-btn {
		position: absolute;
		left: 40upx;
		z-index: 9999;
		padding-top: 40px;
		top: 40upx;
		font-size: 40upx;
		color: red;
	}
	.confirm-btn {
		width: 630upx;
		height: 80upx;
		line-height: 80upx;
		color: #fff;
		font-size: 30upx;
		background-image: linear-gradient(-90deg, #fd3131 0%, #ff6a47 100%);
		border-radius: 5px;
		opacity: 0.6;
	}

</style>
